<template>
  <div id="model-pool" :style="{ bottom: bottomOffset, height: `${height}px` }" class="max-w-md">
    <nav id="nav-bar" class="w-full h15 bg-#1a1b1d py-1 pl-4" flex="~ items-center">
      <ul
        id="group-container"
        class="overflow-x-auto whitespace-nowrap flex h-full gap-2.2 grow relative"
      >
        <NavItem
          v-for="(item, index) in categories"
          :key="`group-${item.category_code}`"
          :id="`group-${item.category_code}`"
          :data-index="index"
          :data="item"
          :active="item.category_code === curCategory"
          :hasSelected="hasSelected(item.category_code)"
          @click="scrollTo({ code: item.category_code, shouldModelListMove: true })"
        />
      </ul>
      <n-button type="primary" :bordered="false" @click="handleDone" class="w10 h10 mx-3 rd-2.4">
        <template #icon>
          <n-image :src="IconCheck" preview-disabled :width="20" />
        </template>
      </n-button>
    </nav>
    <n-carousel
      :loop="false"
      :show-dots="false"
      :show-arrow="false"
      :touchable="touchable"
      @update:current-index="onPageChange"
      ref="carouselRef"
    >
      <ModelsOfGroup
        v-for="item in categories"
        :key="item.category_code"
        :category-code="item.category_code!"
        :enableTouchMove="enableTouchMove"
        ref="modelsGroupRefs"
      />
    </n-carousel>
  </div>
</template>

<script setup lang="ts">
import { NButton, NImage, NCarousel } from 'naive-ui'
import IconCheck from '@/assets/images/ic_check.png'
import ModelsOfGroup from './Models-of-group/ModelsOfGroup.vue'
import useNavigator from '@/utils/hooks/useNavigator'
import { useModelCategory } from '@/stores/useModelCategory'
import NavItem from './NavItem.vue'
import type { Model } from '@/service/types'
import { selectedModelsProvider } from '../useCreate'
const { data: categories } = useModelCategory()
const { animateTo } = useNavigator()
const carouselRef = ref()
const modelsGroupRefs = ref<InstanceType<typeof ModelsOfGroup>[]>([])
const props = defineProps<{
  /** 是否打开 */
  open: boolean
  /** 关闭回调 */
  onClose: () => void
  /** 该组件高度 */
  height: number
}>()
const curCategory = defineModel<string>()
const {
  selectedModels,
  moveModelList
}: {
  selectedModels: globalThis.Ref<Model[]>
  moveModelList: (categoryCode?: string) => void
} = inject<any>(selectedModelsProvider)

const touchable = ref(true)
// const curCategory = ref(categoryCode)
watch([() => props.open, curCategory], ([newOpen, code]) => {
  showModelPool(newOpen)
  scrollTo({ code: code, behavior: 'instant' })
})
const hasSelected = (code?: string) => {
  const i = selectedModels.value?.findIndex((ele: Model) => ele.category_code === code)
  if (typeof i === 'number' && i >= 0) return true
  return false
}
/**
 * 打开界面和点击导航按钮触发跳转
 * @param code 分类编码
 * @param behavior 导航跳转行为：不需要动画-'instant' | 需要动画-'smooth'
 * @param shouldModelListMove 是否需要模型列表移动
 */
const scrollTo = (params: {
  code?: string
  behavior?: ScrollBehavior
  shouldModelListMove?: boolean
}) => {
  const { code, behavior, shouldModelListMove } = params
  if (!code) {
    curCategory.value = categories[0].category_code
  } else {
    curCategory.value = code
  }
  // 轮播跳转
  if (carouselRef) {
    const i = categories.findIndex((item) => item.category_code === code)
    carouselRef.value.to(i)
  }
  // 导航跳转
  animateTo(`group-${code}`, `group-container`, behavior)
  if (shouldModelListMove) {
    moveModelList(code)
  }
}
const bottomOffset = ref('-100vh')
const showModelPool = (show: boolean) => {
  if (show) {
    bottomOffset.value = '0vh'
  } else {
    bottomOffset.value = '-100vh'
  }
}
const handleDone = () => {
  props.onClose()
}
const enableTouchMove = (val: boolean) => {
  if (touchable.value === val) return
  touchable.value = val
}

const onPageChange = (index: number) => {
  const code = categories[index].category_code
  curCategory.value = code
  animateTo(`group-${code}`, `group-container`)
  moveModelList(code)
  modelsGroupRefs.value[index]?.onEnter()
}
</script>

<style scoped>
#model-pool {
  position: fixed;
  bottom: 0px;
  /* height: calc(100vh - 12rem); */
  width: 100%;
  background-color: black;
  transition: all 0.4s;

  .fade-text {
    mask: linear-gradient(90deg, white, white 84%, transparent);
  }
  #model-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
}
</style>
